<template>
	<view class="">
		<view class="container">
			<view class="con-1">
				<!-- <nav-bar title="报名培训战报" color="white" bg="rgba(0,0,0,0)"></nav-bar> -->
				<nav-bar title="报名培训战报" :color="navBarColor" :bg="navBarBg"></nav-bar>
				<view class="bg">
					<view class="address">
						<view class="flex-space-between">
							<view class="flex-align" style="position: unset;">
								<!-- <van-image v-if="itemChooselist.venue_thumb != ''" width="74rpx" height="74rpx" radius="2"
									style="margin-right: 10rpx;" :src="itemChooselist.venue_thumb" /> -->
								<image v-if="itemChooselist.venue_thumb != ''"
									style="margin-right: 10rpx;position: unset;width: 74rpx;height: 74rpx;border-radius: 2rpx;"
									:src="itemChooselist.venue_thumb"></image>
								<van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover" style="margin-right: 10rpx;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<view>
									<view class="address-name">{{itemChooselist.venue_name}}</view>
									<view class="address-desc">地址:{{itemChooselist.address}}</view>
								</view>
							</view>
							<view class="exchange flex-center flex-column " @click="show_no">
								<van-icon name="exchange" size="16" />
								切换
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 顶部导航 -->
			<!-- <view class="header">
				<view class="header-content">
					<text class="title">招生战报</text>
					<text class="date">{{ formattedDate }}</text>
				</view>
			</view> -->
			<view class="main">
				<!-- 数据概览区域 -->
				<view class="overview">
					<!-- 总报名人数展示 -->
					<view class="total-card">
						<text class="label">总报名人数</text>
						<view class="value-container">
							<text class="value">{{total_info.total_stock||0}}/{{total_info.total_enroll||0}}</text>
							<!-- <text
								:class="['change', total_info.total_percent.includes('↑') ? 'up' : 'down']">{{ total_info.total_percent }}</text> -->
							<!-- <uni-icons :type="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'" size="14"
									color="#666"></uni-icons> -->
							<!-- <view class="" style="margin-left: 16rpx;display: flex;align-items: center;">
								<view class="" v-if="total_info.total_percent>0">
									<uni-icons type="arrow-up" size="14" color="#2ecc71"></uni-icons>
								</view>
								<view class="" v-else>
									<uni-icons type="arrow-down" size="14" color="#e74c3c"></uni-icons>
								</view>
								<text
									:class="['change', total_info.total_percent>0 ? 'up' : 'down']">{{ total_info.total_percent }}</text>
							</view> -->
						</view>
					</view>
					<!-- 今日、本周和本月新增展示 -->
					<view class="overview-grid">
						<view class="overview-item" @click="handleCardClick1(info.today)">
							<text class="label">今日新增</text>
							<view class="value-container">
								<text class="value">{{ info.today.num }}</text>
								<!-- <text
									:class="['change', info.change.includes('↑') ? 'up' : 'down']">↑{{ info.today.today_rate }}</text> -->
								<view class="" style="margin-left: 16rpx;display: flex;align-items: center;">
									<view class="" v-if="info.today.today_rate>0">
										<uni-icons type="arrow-up" size="14" color="#2ecc71"></uni-icons>
									</view>
									<view class="" v-else>
										<uni-icons type="arrow-down" size="14" color="#e74c3c"></uni-icons>
									</view>
									<text
										:class="['change', info.today.today_rate>0 ? 'up' : 'down']">{{ info.today.today_rate || 0}}</text>
								</view>
							</view>
						</view>
						<view class="overview-item" @click="handleCardClick2(info.week)">
							<text class="label">本周新增</text>
							<view class="value-container">
								<text class="value">{{ info.week.num }}</text>
								<view class="" style="margin-left: 16rpx;display: flex;align-items: center;">
									<view class="" v-if="info.week.week_rate>0">
										<uni-icons type="arrow-up" size="14" color="#2ecc71"></uni-icons>
									</view>
									<view class="" v-else>
										<uni-icons type="arrow-down" size="14" color="#e74c3c"></uni-icons>
									</view>
									<text
										:class="['change', info.week.week_rate>0 ? 'up' : 'down']">{{ info.week.week_rate || 0}}</text>
								</view>
							</view>
						</view>
						<view class="overview-item" @click="handleCardClick3(info.month)">
							<text class="label">本月新增</text>
							<view class="value-container">
								<text class="value">{{ info.month.num }}</text>
								<view class="" style="margin-left: 16rpx;display: flex;align-items: center;">
									<view class="" v-if="info.month.month_rate>0">
										<uni-icons type="arrow-up" size="14" color="#2ecc71"></uni-icons>
									</view>
									<view class="" v-else>
										<uni-icons type="arrow-down" size="14" color="#e74c3c"></uni-icons>
									</view>
									<text
										:class="['change', info.month.month_rate>0 ? 'up' : 'down']">{{ info.month.month_rate || 0}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="overview-grid">
						
					</view>
					<view class="overview-grid">
						
					</view> -->
				</view>
				<!-- 校区搜索和排序 -->
				<view class="search-sort">
					<view class="sort-btn" @click="toggleSort1">
						<uni-icons :type="sortOrder1 === 'asc1' ? 'arrow-up' : 'arrow-down'" size="14"
							:color="sortOrder1 === 'asc1' ? '#ff0000' : '#0055ff'"></uni-icons>
						<text class="sort-text">{{ sortOrder1 === 'asc1' ? '招生人数升序' : '招生人数降序' }}</text>
					</view>
					<view class="sort-btn" @click="toggleSort2">
						<uni-icons :type="sortOrder2 === 'asc2' ? 'arrow-up' : 'arrow-down'" size="14"
							:color="sortOrder2 === 'asc2' ? '#ff0000' : '#0055ff'"></uni-icons>
						<text class="sort-text">{{ sortOrder2 === 'asc2' ? '招生进度升序' : '招生进度降序' }}</text>
					</view>
					<view class="sort-btn" @click="toggleSort3">
						<uni-icons :type="sortOrder3 === 'asc3' ? 'arrow-up' : 'arrow-down'" size="14"
							:color="sortOrder3 === 'asc3' ? '#ff0000' : '#0055ff'"></uni-icons>
						<text class="sort-text">{{ sortOrder3 === 'asc3' ? '招生金额升序' : '招生金额降序' }}</text>
					</view>
					<!-- <view class="search-box">
						<u-search @search="search" @custom="onSearch2" placeholder="搜索校区" :showAction="false"
							v-model="searchKey2" shape="square" bgColor="#fff"  @focus='onfocus2' @blur='onblur2'>
						</u-search>
					</view>
					<view class="" v-if="onif2 == true">
						<view v-if="filteredList2.length > 0" class="list-container2">
							<scroll-view scroll-y class="list">
								<view v-for="(item, index) in filteredList2" :key="index" class="list-item"
									@click="selectItem2(item)">
									<view class="" :class="[item.id ===Itemid2?'card_jec':'card_je']">
										{{ item.venue_name }}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					
					<view class="" style="height: 50rpx;">
						<image @click="showsclick()"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c154ba8794158495ff83ed092dc0fad167ff2406.png"
							style="width: 80rpx;height: 40rpx;" mode=""></image>
					</view>
					<view class="box_20" v-if="sortOrder === 'desc'">
						<view class=""
							style="display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 20rpx;">
							<view class="image-text_6" style="margin-right: 20rpx;" @click="shanchu(1)">
								<uni-icons type="arrow-down" size="14" color="#ffffff"></uni-icons>
								<text lines="1" class="text-group_6">人数降序</text>
							</view>
							<view class="image-text_6" @click="shanchu(2)">
								<uni-icons type="arrow-up" size="14" color="#ffffff"></uni-icons>
								<text lines="1" class="text-group_6">人数升序</text>
							</view>
						</view>
						<view class="" style="display: flex;flex-direction: row;">
							<view class="image-text_6" style="margin-right: 20rpx;" @click="shanchu(3)">
								<uni-icons type="arrow-down" size="14" color="#ffffff"></uni-icons>
								<text lines="1" class="text-group_6">报名率降序</text>
							</view>
							<view class="image-text_6" @click="shanchu(4)">
								<uni-icons type="arrow-up" size="14" color="#ffffff"></uni-icons>
								<text lines="1" class="text-group_6">报名率升序</text>
							</view>
						</view>
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f820809dedb1e84b45f4b46e359e3ad308af5541.png"
							class="image_4"></image>
					</view> -->
				</view>

				<!-- 校区卡片列表 -->
				<view class="campus-list">
					<view v-for="(campus, index) in enrolllist" :key="index" class="campus-card"
						@click="showActivities(campus)">
						<view class="campus-header">
							<view class="campus-title">
								<uni-icons type="info" size="18" color="#3498db"></uni-icons>
								<text class="campus-name">{{ campus.area_name }}</text>
							</view>
							<view class="rank">
								<uni-icons type="medal" size="14" color="#999"></uni-icons>
								<text class="rank-text">第{{ index + 1 }}名</text>
							</view>

						</view>
						<view class="campus-details">
							<view class="progress-circle">
								<cCircle :size="85" :percent="campus.percent" animation circleColor="#00ba5a"
									:circleWidth="8" :direction="180" defaultColor="#ddd">
									<view slot="content" class=""
										style=" height: 100%;width: 100%;border-radius: 50%;font-size: 24rpx;color: #000000;display: flex; flex-direction: column; justify-content: center;align-items: center;">
										<view>
											<text style="font-size: 28rpx;">{{campus.percent}}</text>%
										</view>
										<view class=""
											style="font-size: 20rpx;display: flex; flex-direction: row; justify-content: center;align-items: center;margin-top: 10rpx;">
											已报:{{ campus.enroll_total }}/{{ campus.stock_total }}
										</view>
									</view>
								</cCircle>
							</view>
							<view class="detail-info">
								<view class="enrollment-info">
									<!-- <text
										class="info-text">已报名：{{ campus.enroll_total }}/{{ campus.stock_total }}</text> -->
									<text class="info-text">剩余名额：{{ campus.less_stock }}</text>
								</view>
								<view class="enrollment-info">
									<!-- <text
										class="info-text">已报名：{{ campus.enroll_total }}/{{ campus.stock_total }}</text> -->
									<text class="info-text">金额：{{ campus.enroll_fee }}</text>
								</view>
								<view class="activity-info">
									<uni-icons :type="campus.enrolling_cnt > 0 ? 'notification' : 'notification-filled'"
										:color="campus.enrolling_cnt > 0 ? '#f1c40f' : '#999'" size="16"></uni-icons>
									<text class="activity-text">{{ campus.enrolling_cnt }}个活动进行中</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<van-popup closeable :show="show" round position="bottom" @close="showclose">
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>
<script>
	const personal = require("@/api/personal/index.js");
	const venues = require("@/api/venues/venues.js");
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				dateActive: '5',
				show: false,
				venuelist: [], //场馆列表
				itemChooselist: {}, // 场馆数据
				itemChoose: {},
				showlist: true,
				nac: '5',
				after_sale_num: '',
				complete_num: '',
				total_num: '',
				jxzActive: '1',
				jxznac: '1',
				datelist: [{
						label: '进行中',
						value: '1'
					},
					{
						label: '已结束',
						value: '6'
					}
				],
				enrolllist: [],
				formattedDate: '300',
				overviewData: [{
						label: '总报名人数/率',
						value: '2,356/76%',
						change: '↑12%',
						type: 'total'
					},
					{
						label: '今日新增',
						value: '128',
						change: '↑5%',
						type: 'today',
						amount: '25,600'
					},
					{
						label: '本周新增',
						value: '865',
						change: '↑8%',
						type: 'week',
						amount: '172,800'
					},
					{
						label: '本月新增',
						value: '3,256',
						change: '↑15%',
						type: 'month',
						amount: '651,200'
					}
				],
				searchText: '',
				sortOrder1: "asc",
				sortOrder2: "asc",
				sortOrder3: "asc",
				num: '10',
				hour_num: '30',
				percent: '',
				total_info: {},
				info: {},
				sort: 1,
				onif2: false,
				searchKey2: '', // 搜索关键词
				originalList2: [],
				filteredList2: [], // 过滤后的列表，用于展示
				selectedItem2: null, // 选中项的数据
			}
		},
		watch: {
			searchKey2(newVal) {
				this.filterList2(newVal);
			},
		},
		mounted() {
			this.filteredList2 = this.originalList2;
		},
		onLoad() {
			if (uni.getStorageSync("entry_name") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/my-center/my-center'
					})
				}, 1000);
			}
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]
			this.enroll_report()
			this.shuju()
			this.percent = this.amount((this.num / this.hour_num * 100))
			console.log(this.percent, 'this.percent')
		},
		methods: {
			async shuju() {
				let params = {
					venue_id: this.itemChooselist.id
				}
				let res = await venues.studenttrain_conf(params)
				if (res.code === 1) {
					console.log(res, 'resresres')
					this.originalList2 = res.data.areaList
				}

			},
			// 搜索事件处理
			onSearch2(value) {
				console.log(value, 'value')
				this.filterList2(value);
			},
			// 选择列表项事件处理
			selectItem2(item) {
				console.log(item, 'item')
				this.onif2 = false
				this.selectedItem2 = item;
				this.searchKey2 = item.venue_name; // 可选：将搜索关键词设置为选中项的名称
				this.Itemid2 = item.id
				// 可以在此处添加其他逻辑，如关闭搜索结果列表等
				this.enroll_report()
			},
			onclear2() {
				this.hylist = []
				this.searchKey2 = ''
				this.Itemid2 = ''
				this.enroll_report()
			},
			// 过滤列表方法
			filterList2(key) {
				if (key) {
					this.filteredList2 = this.originalList2.filter(item =>
						item.venue_name.includes(key)
					);
				} else {
					this.filteredList2 = this.originalList2;
				}
			},
			onfocus2(value) {
				console.log(value, 'valuevalue111')
				this.onif2 = true
			},
			onblur2(value) {
				console.log(value, 'valuevalue222')
				this.onif2 = false
			},
			shanchu(type) {
				this.sort = type
				this.sortOrder = 'asc'
				this.enroll_report()
			},
			showsclick() {
				this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
			},
			toggleSort1() {
				this.sortOrder1 = this.sortOrder1 === 'asc1' ? 'desc1' : 'asc1';
				console.log(this.sortOrder1, 'this.sortOrder1 ')
				if( this.sortOrder1 == 'desc1' ){
					this.sort = 1
				} else if( this.sortOrder1 == 'asc1' ){
					this.sort = 2
				}
				this.enroll_report()
			},
			toggleSort2() {
				this.sortOrder2 = this.sortOrder2 === 'asc2' ? 'desc2' : 'asc2';
				console.log(this.sortOrder2, 'this.sortOrder2 ')
				if( this.sortOrder2 == 'desc2' ){
					this.sort = 3
				} else if( this.sortOrder2 == 'asc2' ){
					this.sort = 4
				}
				this.enroll_report()
			},
			toggleSort3() {
				this.sortOrder3 = this.sortOrder3 === 'asc3' ? 'desc3' : 'asc3';
				console.log(this.sortOrder3, 'this.sortOrder3 ')
				if( this.sortOrder3 == 'desc3' ){
					this.sort = 5
				} else if( this.sortOrder3 == 'asc3' ){
					this.sort = 6
				}
				this.enroll_report()
			},
			handleCardClick1(item) {
				// if (item.type === 'today' || item.type === 'week' || item.type === 'month') {
				// 	uni.showModal({
				// 		title: item.type === 'today' ? '今日报名情况' : item.type === 'week' ? '本周报名情况' : '本月报名情况',
				// 		content: `报名人数：${item.value}人\n报名金额：¥${item.amount}\n环比变化：${item.change}`,
				// 		showCancel: false,
				// 		confirmText: '知道了'
				// 	});
				// }
				uni.showModal({
					title: '今日报名情况',
					content: `报名人数：${item.num?item.num:''}人\n报名金额：¥${item.today_fee?item.today_fee:0}\n环比变化：${item.today_rate}`,
					showCancel: false,
					confirmText: '知道了'
				});
			},
			handleCardClick2(item) {
				uni.showModal({
					title: '本周报名情况',
					content: `报名人数：${item.num?item.num:''}人\n报名金额：¥${item.week_fee?item.week_fee:0}\n环比变化：${item.week_rate}`,
					showCancel: false,
					confirmText: '知道了'
				});
			},
			handleCardClick3(item) {
				uni.showModal({
					title: '本月报名情况',
					content: `报名人数：${item.num?item.num:''}人\n报名金额：¥${item.month_fee?item.month_fee:0}\n环比变化：${item.month_rate}`,
					showCancel: false,
					confirmText: '知道了'
				});
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			jxzlist(item) {
				this.jxzActive = item.value
			},
			showActivities(item) {
				console.log(item, 'item')
				uni.navigateTo({
					url: './training_detailed?id=' + item.area_id + "&venue_id=" + this.itemChooselist.id +
						"&area_name=" + item.area_name
				})
			},
			async enroll_report() {
				let params = {
					venue_id: this.itemChooselist.id,
					sort: this.sort,
					area_id: this.Itemid2, //项目
				};
				let res = await personal.enroll_report(params);
				if (res.code == 1) {
					this.enrolllist = res.data.list
					this.info = res.data.info
					this.total_info = res.data.total_info
				}
			},

			dataslist(item) {
				this.dateActive = item.value
				this.nac = item.value
				this.stat_order()
			},
			onChange({
				detail: {
					index
				}
			}) {
				this.tabActive = index;
			},
			// 选择场馆
			onChange(e) {
				let that = this
				let i = e.detail
				const item = this.venuelist[i]
				if (item) {
					this.itemChoose = item
					this.venuelist[i].checked = true
				} else {
					this.itemChoose = {}
				}
			},
			onChangelist(item) {
				this.itemChoose = item
				this.itemChooselist = this.itemChoose
				this.show = false
				this.showlist = true
				this.dateActive = '5'
				this.nac = '5'
				this.enroll_report()
			},
			// 确认按钮
			queren() {
				this.itemChooselist = this.itemChoose
				this.show = false
				this.showlist = true
				this.dateActive = '5'
				this.nac = '5'
				this.stat_order()
			},
			show_no() {
				this.show = true
				this.showlist = false
			},
			showclose() {
				this.show = false
				this.showlist = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}



	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgb(243, 243, 243);

		.con-1 {
			width: 100%;
			position: relative;

			/deep/ .nav-bar {
				position: fixed;
			}

			.bg {
				width: 100%;
				height: 300rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5d1ccc3b7ac6cc185130c88a8ac2e90b1eeba707.png");
				background-size: 100%;
				background-position: 50% 80%;

				.address {
					color: #fff;
					padding-top: 190rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					height: 150rpx;

					&-name {
						font-size: 34rpx;
						font-weight: 700;
						line-height: 34rpx;
					}

					&-desc {
						margin-top: 18rpx;
						font-size: 22rpx;
						line-height: 22rpx;
					}

					.exchange {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.2);
						color: rgb(234, 248, 248);
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.header {
		background-color: #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		// z-index: 100;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 88rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.date {
		font-size: 26rpx;
		color: #666;
	}

	.main {
		padding: 30rpx;
	}

	.overview {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.total-card {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
	}

	.overview-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.overview-item {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
	}

	.label {
		font-size: 26rpx;
		color: #666;
	}

	.value-container {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.value {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.change {
		font-size: 24rpx;
	}

	.up {
		color: #2ecc71;
	}

	.down {
		color: #e74c3c;
	}

	.search-sort {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin: 30rpx 0;
		position: relative;
		justify-content: space-around;

		.list-container2 {
			max-height: 300rpx;
			overflow-y: auto;
			box-shadow: 0 0 18rpx 8rpx hsla(0, 0%, 40%, .1);
			border-radius: 4rpx;
			padding: 10rpx;
			background-color: #fff;
			position: fixed;
			z-index: 999;
			top: 780rpx;
			left: 40rpx;
			width: 300rpx;
			font-size: 28rpx;

		}

		.list {
			height: 100%;
		}

		.list-item {
			padding: 15rpx;
			// border-bottom: 1px solid #eee;
			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 30rpx;
		}

		.card_jec {
			color: rgb(13, 132, 255);
		}

		.card_je {
			color: #000000;
		}

		.list-item:last-child {
			border-bottom: none;
		}

		.list-item:hover {
			background-color: #f5f5f5;
		}
	}

	.box_20 {
		background-color: rgba(62, 62, 62, 1.0);
		border-radius: 10rpx;
		position: absolute;
		width: 280rpx;
		height: 140rpx;
		flex-direction: column;
		display: flex;
		right: 10px;
		top: 80rpx;
		z-index: 998;
		justify-content: center;
		align-items: center;

		.image-text_4 {
			width: 34rpx;
			height: 62rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 20rpx 0 0 28rpx;
		}

		.icon_5 {
			width: 30rpx;
			height: 30rpx;
			margin-left: 2rpx;
		}

		.text-group_4 {
			width: 34rpx;
			height: 18rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 18rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin-top: 14rpx;
		}

		.image-text_5 {
			width: 36rpx;
			height: 65rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 17rpx 0 0 37rpx;
		}

		.icon_67 {
			width: 32rpx;
			height: 32rpx;
			margin-left: 2rpx;
		}

		.text-group_5 {
			width: 36rpx;
			height: 18rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 18rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin-top: 15rpx;
		}

		.image-text_6 {
			width: 110rpx;
			height: 40rpx;
			background-color: rgba(255, 255, 255, 0.4);
			border-radius: 5rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			justify-content: space-around;
		}

		.icon_7 {
			width: 32rpx;
			height: 32rpx;
			margin-left: 2rpx;
		}

		.text-group_6 {
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 18rpx;
			font-weight: 500;
			white-space: nowrap;
		}

		.image_4 {
			position: absolute;
			right: 10rpx;
			top: -13rpx;
			width: 28rpx;
			height: 14rpx;
		}
	}

	.search-box {
		flex: 1;
	}

	.sort-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background: #ffffff;
		padding: 10rpx 10rpx;
		border-radius: 100rpx;
	}

	.sort-text {
		font-size: 26rpx;
		color: #666;
	}

	.campus-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.campus-card {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
	}

	.campus-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.rank {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.rank-text {
		font-size: 26rpx;
		color: #999;
	}

	.campus-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.campus-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #3498db;
	}

	.campus-details {
		display: flex;
		align-items: center;
		gap: 40rpx;
	}

	.progress-circle {
		width: 220rpx;
		height: 220rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.detail-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
		/*  子元素相对父元素垂直居中 */
		gap: 16rpx;
	}

	.enrollment-info {
		display: flex;
		justify-content: space-between;
	}

	.info-text {
		font-size: 26rpx;
		color: #666;
	}

	.activity-info {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 8rpx;
	}

	.activity-text {
		font-size: 26rpx;
		color: #666;
	}

	/deep/ .good-box {
		height: 60vh;
		padding: 0px 30rpx;
		display: flex;
		flex-direction: column;

		.title {
			color: #000;
			font-size: 30rpx;
			font-weight: 700;
			margin-top: 40rpx;
		}

		.van-radio__label {
			line-height: inherit;
		}

		.good-list {
			flex: 1;
			height: 0;
			overflow: auto;

			.good-item {
				margin-top: 30rpx;

				.info {
					margin-left: 25rpx;

					.address {
						color: #fff;
						padding-top: 20rpx;
						padding-right: 30rpx;
						height: 70rpx;

						&-name {
							font-size: 34rpx;
							font-weight: 700;
							line-height: 34rpx;
						}

						&-desc {
							margin-top: 18rpx;
							font-size: 22rpx;
							line-height: 22rpx;
						}

						.exchange {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							background-color: rgba(0, 0, 0, 0.2);
							color: rgb(234, 248, 248);
							font-size: 24rpx;
						}
					}

					.name {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
					}


					.tag {
						color: rgb(4, 179, 90);
						font-size: 24rpx;
						font-weight: 500;
						padding: 0px 10rpx;
						margin-right: 20rpx;
						background-color: rgba(4, 179, 90, 0.2);
						border-radius: 4rpx;

						&:nth-of-type(2) {
							color: rgb(236, 70, 246);
							background-color: rgba(236, 70, 246, 0.2);
						}
					}

					.address {
						margin-top: 10rpx;
						color: rgb(136, 136, 136);
						font-size: 22rpx;
					}
				}

			}
		}

		.footer {
			padding: 20rpx 0;
			background-color: rgb(255, 255, 255);

			.btn {
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				font-weight: 700;
				padding: 20rpx 0;
				text-align: center;
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
			}
		}
	}
</style>